<template>
	<div>
		<opear-prompt v-show='show_prompt'>
			{{prompt_text}}
		</opear-prompt>
		
		<div class="header-list">
			<div class="hl-l">
				<p>标识</p>
			</div>
			<div class="hl-r">
				<input v-model="idData" placeholder="请输入标识" class="hl-r-input" />
			</div>
		</div>
		<div class="header-list">
			<div class="hl-l">
				<p>标题</p>
			</div>
			<div class="hl-r">
				<input v-model="titleData" placeholder="请输入标题" class="hl-r-input" />
			</div>
		</div>
		<div class="header-list">
			<div class="hl-l">
				<p>简讯</p>
			</div>
			<div class="hl-r">
				<input v-model="infoData" placeholder="请输入简讯" class="hl-r-input" />
			</div>
		</div>
		<div class="header-list list-margin10">
			<div class="hl-l">
				<p>浏览</p>
			</div>
			<div class="hl-r">
				<input v-model="commData" placeholder="请输入浏览次数" class="hl-r-input" />
			</div>
		</div>
		<div class="header-list">
			<div class="hl-l">
				<p>作者</p>
			</div>
			<div class="hl-r">
				<input v-model="userData" placeholder="请输入作者" class="hl-r-input" />
			</div>
		</div>
		<div class="header-list list-margin10">
			<div class="hl-l">
				<p>缩略图</p>
			</div>
			<div class="hl-r">
				<input v-model="userImgData" placeholder="请输入图片地址" class="hl-r-input" />
			</div>
		</div>
		<div class="header-list">
			<div class="hl-l">
				<p>首图</p>
			</div>
			<div class="hl-r">
				<input v-model="conImgData" placeholder="请输入图片地址" class="hl-r-input" />
			</div>
		</div>
		<div class="header-list-content">
			<div class="hl-content-l">
				<p>内容</p>
			</div>
			<div class="hl-content-r">
				<textarea v-model="contentData" class="text-area" placeholder="请输入内容"></textarea>
			</div>
		</div>
		<button 
				class="add-button" 
				:class='{ opeAddButtonActive: opeActive }'
				@touchstart="opeTouchstart()" 
				@touchend="opeTouchend()"
				@click="submit()"
				
		>
			添加
		</button>
	</div>
</template>

<script>
	import axios from 'axios'
	import OpearPrompt from '../../../common/CommonPrompt'
	export default {
		name: 'opear-from',
		components: {
			OpearPrompt
		},
		data () {
			return {
				opeActive: false,
				idData: '',
				titleData: '',
				infoData: '',
				commData: '',
				userData: '',
				userImgData: '',
				conImgData: '',
				contentData: '',
				show_prompt: false,
				prompt_text: ''
			}
		},
		methods: {
			opeTouchstart () {
				this.opeActive = true
			},
			opeTouchend (){
				this.opeActive = false
			},
			submit () {
				var _this = this;
				var url = '/addArticles';
				if ( 
					_this.idData == '' || _this.titleData == '' || 
					_this.infoData == '' || _this.commData == '' || 
					_this.userData == '' || _this.userImgData == '' || 
					_this.contentData == ''
					) 
				{
					_this.show_prompt = true,
					_this.prompt_text = '参数不完整'
					setTimeout( ()=> {
						_this.show_prompt = false
					},1600)
					return
				}
				var params = {
					id: _this.idData,
					title: _this.titleData,
					info: _this.infoData,
					comm: _this.commData,
					user: _this.userData,
					uimg: _this.userImgData,
					conImg: _this.conImgData,
					content: _this.contentData,
					permissions:localStorage.getItem('user_id')
				};
				axios({
					method: 'post',
					url: '/home_lists' + url,
					data: params
				})
				.then( response=> {
					let res = response.data
					if (res.status == 0) {
						_this.show_prompt = true,
						_this.prompt_text = res.msg,
						_this.idData = '',
						_this.titleData = '',
						_this.infoData = '',
						_this.commData = '',
						_this.userData = '',
						_this.userImgData = '',
						_this.conImgData = '',
						_this.contentData = ''
						return 
					} else {
						_this.show_prompt = true,
						_this.prompt_text = res.msg
						setTimeout( ()=> {
							_this.show_prompt = false
						},1600)
						return
					}
				})
				.catch( err=> {
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~stylus/minxins.styl'
	@import '~stylus/glo.styl'
	.list-margin10
		margin-top:14px
	.header-list
		padding:20px
		background:#fff
		flexRow()
		.hl-l
			width:114px
			height:70px
		.hl-l p
			line-height:70px
			font-size:30px
			margin-left:10px
			overflow:hideen
			text-overflow:ellipsis
			white-space:nowrap
		.hl-r
			width:594px
			height:70px
			display:flex
			align-items:center
			.hl-r-input
				font-size:26px
				border:none
				width:91%
				padding:14px 24px
				outline:none
	.header-list-content
		padding:20px
		background:#fff
		flexRow()
		padding-bottom:30px
		.hl-content-l
			width:114px
			height:70px
		.hl-content-l p
			line-height:70px
			font-size:26px
			margin-left:10px
			overflow:hideen
			text-overflow:ellipsis
			white-space:nowrap
		.hl-content-r
			width:594px
			height:280px
			display:flex
			align-items:center
			.text-area
				width:91%
				height:240px
				padding:14px 24px
				border:none
				font-size:26px
				outline:none
	.add-button
		background:#4A90E2
		color:#fff
		display:block
		margin:50px auto
		padding:28px 320px
		border:none
		font-size:30px
		border-radius:8px
		outline:none
	.opeAddButtonActive
		background:#2275D7
</style>
